<template>
	<div class="address-item" @click='addressItemClick'>
		<van-cell :is-link='isLink' center>
			<template slot="title">
				<span class="name">{{info.name}}</span>
				<span class="tel">{{info.tel}}</span>
				<van-tag type="danger" color='#FEF3F3' text-color="#DF5438" v-if="info.default">默认</van-tag>
			</template>
			<template slot="label">
					<span class="address">{{info.districtCN}} {{info.address}}</span>
					<img :src="edmitImg" alt="" class="edmit-img" v-if='showEdmit' @click.stop='edmitAddress'>
			</template>
		</van-cell>
		<img :src="positionBottomImg" alt="" class="position-bottom-img" v-if='showBottomImg'>
	</div>
</template>

<script>
	import {
		Cell,Tag 
	} from "vant";
	export default {
		name: "AddressItem",
		components: {
			[Cell.name]: Cell,
			[Tag.name]: Tag,
		},
		props: {
			isLink:{
				type:Boolean,
				default:false
			},
			showBottomImg:{
				type:Boolean,
				default:false
			},
			showEdmit:{
				type:Boolean,
				default:false
			},
			addressInfo:{
				type:Object,
				default:{}
			}
		},
		watch: {
			addressInfo: {
			  deep: true, 
			  handler: function(newVal) {
			    this.info = newVal;
			  }
			}
		},
		data() {
			return {
				positionBottomImg: require("../common/imgs/position-bottom.png"),
				edmitImg: require("../common/imgs/edmit.png"),
				info:{}
			};
		},
		created(){
			this.info = this.addressInfo
		},
		methods:{
			addressItemClick(){
				this.$emit('addressItemClick',this.addressInfo)
			},
			edmitAddress(){
				this.$emit('edmitAddress',this.addressInfo)
			},
		}
	};
</script>

<style scoped lang="less">
	.address-item {
		width: 100%;
		padding: 34px 20px 34px 20px;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.position-bottom-img {
		width: 100%;
		height: 5px;
		margin-top:20px;
	}
	
	.van-cell{
		padding:0;
		.name{
			font-size: 34px;
			font-weight: 500;
			color: #222222;
			line-height: 48px;
		}
		.tel{
			margin:0 30px;
			font-size: 28px;
			color: #888888;
			line-height: 40px;
		}
		.van-tag--danger{
			display:inline-block;
			width: 74px;
			height: 38px;
			border-radius: 4px;
			border: 2px solid #DF5438;
			text-align:center;
			line-height:38px;
		}
		.van-cell__label{
			font-size: 24px;
			color: #222222;
			line-height: 33px;
			margin-top:12px;
			display:flex;
			flex-direction:row;
			justify-content:space-between;
			align-items:center;
			.edmit-img{
				width:32px;
				height:32px;
				margin-left:30px;
			}
		}
	}
   .van-cell::after{
	   display:none;
   }
</style>
